
<template>
  <div id="Goods">
    <p>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-input
        placeholder="按商品编号/名称/供应商查询"
        style="width: 200px"
        v-model="searchQuery"
      ></el-input>
      &nbsp;&nbsp;
      <el-select v-model="statusFilter" value-key="id" placeholder="请选择状态">
        <el-option
          v-for="item in statusOptions"
          :key="item.id"
          :value="item.id"
          :label="item.label"
        />
      </el-select>
      &nbsp;&nbsp;
      <!-- <el-select
        v-model="zeroStockFilter"
        value-key="id"
        placeholder="请选择库存状态"
      >
        <el-option
          v-for="item in zeroStockOptions"
          :key="item.id"
          :value="item.id"
          :label="item.label"
        />
      </el-select> -->
      &nbsp;&nbsp;
      <el-button type="primary" @click="searchGoods">查询</el-button>
    </p>
    <div class="account-top" style="float: right">
      <el-button type="primary" @click="goto('AddGoods')">新增</el-button>
      <!-- <el-button type="primary">启用</el-button> -->

      <el-button type="primary" @click="exportData()">导出</el-button>
      &nbsp;&nbsp;
      <el-upload
        style="display: inline-block"
        class="upload-demo"
        action="/erp/goods/read/goods"
        :on-success="isOk"
      >
        <el-button type="primary">导入</el-button>
      </el-upload>
    </div>
    <div class="account-content" style="position: relative; top: 20px">
      <el-table
        height="450px"
        :data="list"
        border
        style="width: 100%; font-size: 13px; margin-left: 20px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" prop="id" width="55">
        </el-table-column>
        <el-table-column prop="goodcode" label="序号" width="200">
        </el-table-column>
        <el-table-column prop="imagename" label="图片" width="150">
          <template slot-scope="scope">
            <img
              :src="getImageUrl(scope.row.imagename)"
              width="100px"
              height="100px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="barcode" label="商品编号" width="120">
        </el-table-column>
        <el-table-column prop="goodcode" label="商品条码" width="120">
        </el-table-column>
        <el-table-column prop="goodname" label="商品名称" width="120">
        </el-table-column>
        <el-table-column prop="accountType" label="辅助属性" width="200">
        </el-table-column>
        <el-table-column prop="categoryName" label="商品类别" width="200">
        </el-table-column>
        <el-table-column prop="specificationmodel" label="规格型号" width="200">
        </el-table-column>
        <el-table-column prop="suppliercode" label="默认供应商" width="200">
        </el-table-column>
        <el-table-column prop="brandName" label="品牌" width="200">
        </el-table-column>
        <el-table-column prop="basicUnitName" label="单位" width="200">
        </el-table-column>
        <el-table-column prop="defaultStock" label="首选仓库" width="200">
        </el-table-column>
        <el-table-column prop="currentStock" label="当前库存" width="200">
        </el-table-column>
        <el-table-column prop="initNum" label="期初数量" width="200">
        </el-table-column>
        <el-table-column prop="unitCost" label="单位成本" width="200">
        </el-table-column>
        <el-table-column prop="initPrice" label="期初总价格" width="200">
        </el-table-column>
        <el-table-column prop="retailprice" label="零售价" width="200">
        </el-table-column>
        <el-table-column prop="wholesaleprice" label="批发价" width="200">
        </el-table-column>
        <el-table-column prop="vipprice" label="会员价" width="200">
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="200">
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="200">
        </el-table-column>
        <el-table-column prop="itStatus" label="状态" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.itStatus"
              active-color="#66b1ff"
              inactive-color="#c1c1c1"
              :active-value="0"
              :inactive-value="1"
              @change="updateStatus(scope.row.itStatus, scope.row.goodcode)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button @click="remove(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      style="position: relative; left: 700px; top: 30px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="pageInfo.pageSize"
      layout="prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
  </div>
</template>

<script>
import AddGoods from "@/components/goodComponents/AddGoods.vue";

export default {
  name: "Goods",
  components: {
    AddGoods,
  },
  data() {
    return {
      searchQuery: "", // 查询输入框的绑定数据
      statusFilter: "", // 状态过滤器的绑定数据
      zeroStockFilter: 0, // 零库存过滤器的绑定数据
      statusOptions: [
        { id: "", label: "选择商品状态" },
        { id: 0, label: "显示启用商品" },
        { id: 1, label: "显示禁用商品" },
      ],
      zeroStockOptions: [
        { id: 0, label: "选择商品库存情况" },
        { id: 1, label: "是零库存商品" },
        { id: 2, label: "非零库存商品" },
      ],
      fileList: [],
      multipleSelection: [],
      brands: [],
      attributes: [],
      units: [],
      stocks: [],
      categorys: [],
      dialogFormVisible: false,
      pageInfo: null,
      list: [],
      allGoods: [],
    };
  },
  methods: {
    getImageUrl(imagename) {
      // 获取第一个逗号前的字符串
      const filename = imagename.split(",")[0];
      return `http://192.168.152.129:8090/erp/img/${filename}`;
    },
    remove(row) {
      if (confirm("是否确认删除？")) {
        this.axios({
          url: "/erp/goods/goods/delGoods",
          params: {
            id: row.id,
          },
        }).then((rs) => {
          console.log(rs.data.itStatus);
          this.byPage(1);
        });
      }
    },
    handleClick(row) {
      console.log(row);
      const id = row.id;
      this.$router.push({ name: "AddGoods", params: { id: id } });
    },
    updateSta: function (status, id) {
      const category = {
        status: status,
        id: id,
      };
      console.log("lastCategory", category);
      this.axios({
        url: "/erp/goods/category/update",
        method: "POST",
        data: {
          ...category,
        },
      }).then((rs) => {
        console.log(rs.data.result);
        this.searchPage();
      });
    },

    updateStatus(status, goodcode) {
      var goods = {
        goodcode,
        itStatus: status,
      };
      this.axios({
        url: "/erp/goods/goods/updateGoods",
        method: "POST",
        data: {
          ...goods,
        },
      }).then((rs) => {
        console.log(rs.data.itStatus);
        this.byPage(1);
      });
    },
    searchGoods() {
      console.log(this.statusFilter);
      this.byPage(1);
    },
    isOk(e) {
      console.log(e);
      if (e.code === 200) {
        alert("导入成功!");
        this.byPage(1);
      } else {
        alert("导入失败!");
      }
    },
    generateRandomNumber() {
      return Math.floor(100000 + Math.random() * 900000); // 生成范围在 100000 到 999999 之间的随机数
    },
    exportData() {
      var multipleSelection = [];
      multipleSelection = this.allGoods;
      if (
        this.multipleSelection != null &&
        this.multipleSelection.length != 0
      ) {
        console.log("now", this.multipleSelection);
        multipleSelection = this.multipleSelection;
      }

      fetch("/erp/goods/export/goods", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(multipleSelection),
      })
        .then((response) => {
          if (!response.ok) {
            throw new Error("响应出错");
          }
          return response.blob();
        })
        .then((blob) => {
          // 生成下载链接并下载文件
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.style.display = "none";
          a.href = url;
          var name = this.generateRandomNumber();
          a.download = "商品表_" + name + ".xlsx"; // 设置下载的文件名
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
        })
        .catch((error) => {
          console.error("下载文件时出错:", error);
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleSizeChange(val) {
      this.byPage(val);
    },
    handleCurrentChange(val) {
      this.byPage(val);
    },
    byPage(pageNum) {
      this.axios({
        url: "/erp/goods/goods/getList",
        params: {
          pageSize: 5,
          pageNum,
          searchQuery: this.searchQuery,
          itStatus: this.statusFilter,
        },
      })
        .then((rs) => {
          this.pageInfo = rs.data.pageInfo;
          this.list = this.pageInfo.list;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    goto(routeName) {
      // 使用编程式导航跳转到指定路由
      this.$router.push({ name: routeName });
    },
    getAllGoods() {
      this.axios({
        url: "/erp/goods/goods/getAllGoods",
      })
        .then((rs) => {
          this.allGoods = rs.data.list;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  created() {
    this.getAllGoods();
    this.byPage(1);
  },
};
</script>

<style >
#account {
  width: 100%;
  height: 100%;
}

.account-top {
  width: calc(100% -20px);
  height: 60px;
  /* background-color: pink; */
  line-height: 60px;
  padding-left: 20px;
  margin-left: 500px;
  font-size: 13px;
}

.account-top h3 {
  display: inline-block;
  margin-right: 1000px;
}

.account-content {
  width: 100%;
  height: calc(100% - 60px);
  /* background-color: skyblue; */
}
